<template>
	<view class="content">
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="pay_title">
					<text>{{obj.itemName}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_right">{{obj.remarks == null ? '' : obj.remarks}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">缴费时间：</text>
					<text class="d_item_right">{{obj.effectiveStartTime}} 至 {{obj.effectiveEndTime}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">缴费金额：</text>
					<text class="d_item_right highlight">{{obj.amount}} 元</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box" style="overflow: scroll;">
			<custom-card :isShadow="false">
				<view class="pay_title">
					<text>基本信息</text>
				</view>
				<view v-if="stuObj.deptName!=null" class="d_item">
					<text class="d_item_left">所属部门：</text>
					<text class="d_item_right">{{stuObj.deptName}}</text>
				</view>
				<view v-if="stuObj.empName!=null" class="d_item">
					<text class="d_item_left">姓名：</text>
					<text class="d_item_right">{{stuObj.empName}}</text>
				</view>
				<view v-if="stuObj.idCard!=null" class="d_item">
					<text class="d_item_left">身份证：</text>
					<text class="d_item_right">{{stuObj.idCard}}</text>
				</view>
			</custom-card>
		</view>
		
		<!-- #ifndef APP-PLUS -->
		<view class="btn_box">
			<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="queren">确认缴费</button>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="app_box">
			<view class="app_box_item">
				<view style="text-align: center;">
					<text>支付方式</text>
				</view>
				<view class="app_box_items">
					<radio-group @change="radioChange">
						<view class="app_box_top" v-for="(item, index) in list" :key="index">
							<view class="app_box_middle">
								<image style="width: 50rpx;height: 50rpx;" :src="item.channelName == '微信' ? '/static/images/home/weixin.png' : '../../static/images/home/alipay.png'"></image>
								<text style="margin-left: 20rpx;">{{item.channelName}}</text>
							</view>
							<label class="radio"><radio :value="item.channelName" :checked="radioIndex == index" /></label>
						</view>
					</radio-group>
				</view>
				<button type="primary" class="btn_pri" style="background-color: #477EDA;margin-top: 20rpx;" @click="pay">确认缴费</button>
			</view>
		</view>
		<!-- #endif -->
		<mcModal ref="mcModal" :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
	</view>
</template>

<script>
	let _this;
	import {commonPay, JF_MODE, _payment, appPayList} from '../../common/utils/pay_center.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		onLoad:function(option){
			_this = this
			this.obj = {...JSON.parse(decodeURIComponent(option.obj))}
			this.stuObj = {...JSON.parse(decodeURIComponent(option.stuObj))}
		},
		onShow:function(){
			// #ifdef APP-PLUS
			this.getPayList()
			// #endif
		},
		components: {
			mcModal
		},
		data() {
			return {
				obj: {},
				list: [],
				stuObj: {},
				radioIndex: 0,
				radioName: '微信',
				content: '',
				title: '',
				showMcModal: false,
				okBtn: '',
				isApp: false
			}
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {},
			_showModal(option){
				this.title = option.title
				this.content = option.content
				this.showMcModal = true
				this.okBtn = '确认支付'
				this.cc = ()=>{
					this.showMcModal = false
					option.confirm()
				}
			},
			pay() {
				let _this = this
				if(_this.radioName !== '支付宝' && _this.radioName !== '微信') {
				  _showToast('暂不支持该支付渠道支付')
				} else {
					_this._showModal({
						title: '确认支付',
						content: `本次支付的金额为：${_this.obj.amount} 元`,
						confirm(){
							let channelId = _this.list.filter(item => item.channelName === _this.radioName)[0].channelId
							_payment(_this.obj, _this.stuObj, channelId, _this)
						}
					})
				}
			},
			getPayList() {
				_showLoading('加载中,请稍后…')
				let payList = appPayList(JF_MODE, this.obj)()
				payList.then(res => {
					this.list = res
				})
			},
			radioChange(evt) {
				if(evt.detail.value == '支付宝') {
					this.radioName = evt.detail.value
					this.radioIndex = 1
				} else if(evt.detail.value == '微信') {
					this.radioName = evt.detail.value
					this.radioIndex = 0
				} else {
					this.radioName = evt.detail.value
				}
			},
			queren() {
				let _this = this
				_this._showModal({
					title: '确认支付',
					content: `本次支付的金额为：${_this.obj.amount} 元`,
					confirm(){
						// #ifdef MP-WEIXIN
						wx.requestSubscribeMessage({
							tmplIds: ['zZygSFbCHBCnaXjCYH4pSFpkccKCVNfL_WeAd58-WDY'],
							success (res) {
								commonPay(JF_MODE, _this.obj)(_this.stuObj, _this)
							},
							fail(err) {
								console.log(err)
							}
						})
						// #endif
						// #ifdef H5
						commonPay(JF_MODE, _this.obj)(_this.stuObj, _this)
						// #endif
						// #ifdef MP-ALIPAY
						commonPay(JF_MODE, _this.obj)(_this.stuObj, _this)
						// #endif
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #f6f6f6;
		font-family: "PingFang-SC-Heavy, PingFang-SC";
	}
	.content{
		height: 100%;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		overflow-y: scroll;
		padding: 32rpx;
	}
	
	.d_box{
		margin-bottom: 20rpx;
	}
	.pay_title{
		font-size: 36rpx;
		font-weight: 600;
		color: #3C424F;
		margin-bottom: 10px;
	}
	.stu_title{
		font-size: 30rpx;
		font-weight: 600;
		color: #3C424F;
		line-height: 42rpx;
	}
	.d_item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 32rpx;
		
		&:last-child{
			margin-bottom: 0
		}
		
		.d_item_left {
			display: flex;
			flex: 0 0 200rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #6B707A;
			text-align: justify;
		}
		.d_item_right {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #3C424F;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.highlight{
			font-weight: 600;
			color: #FA6400;
		}
	}
	.app_box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding-top: 30rpx;
	}
	.app_box_item {
		width: 100%;
		padding: 0 50rpx 50rpx 50rpx;
	}
	.app_box_items {
		display: flex;
		flex-direction: column;
	}
	.app_box_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	.app_box_middle {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.btn_box {
		height: 150rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #FFF;
	}
	.btn_pri {
		width: 566rpx;
		height: 96rpx;
		font-weight: 700;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		border-radius: 9rpx;
		line-height: 96rpx;
		font-size: 32rpx;
	}
</style>
